<template>
  <div>
    <!-- ===============使用 饿了吗 第三方==================== -->
    <MBX level1="数据统计" level2="数据报表"></MBX>
    <!-- 主体 -->
    <el-card class="mt16">
      <!-- 
      参数说明：
      data:类别为object,配置图表所需要的数据，通常由columns和rows两个key组成
      settings:图表配置项
      组件名通常为ve-图表类型，例如：<ve-map />代表地图组件,<ve-line>代表拆线组件
     -->
      <!-- <ve-map
        :toolbox="{ feature: { saveAsImage: {}, dataZoom: {} } }"
        :data="chartData"
        :settings="settings"
        style="width: 500px; height: 500px; margin: 0 auto"
      ></ve-map> -->

      <!-- 水球图 -->
      <!-- <ve-liquidfill :data="chartData" :settings="settings"></ve-liquidfill> -->

      <ve-bar :data="chartData" :settings="settings"></ve-bar>
    </el-card>
  </div>
</template>

<script>
// import * as echarts from "echarts";
export default {
  // 水球图
  data() {
    return {
      chartData: {
        columns: ["日期", "余额", "年龄"],
        rows: [
          { 日期: "1-1", 余额: 123, 年龄: 3 },
          { 日期: "1-2", 余额: 1223, 年龄: 6 },
          { 日期: "1-3", 余额: 2123, 年龄: 9 },
          { 日期: "1-4", 余额: 4123, 年龄: 12 },
          { 日期: "1-5", 余额: 3123, 年龄: 15 },
          { 日期: "1-6", 余额: 7123, 年龄: 20 },
        ],
      },
      settings: {}
    };
  },

  // 地图
  // data() {
  //   return {
  //       chartData: {
  //         columns: ["位置", "GDP"],
  //         rows: [
  //           { 位置: "吉林", GDP: 123 },
  //           { 位置: "北京", GDP: 1223 },
  //           { 位置: "上海", GDP: 2123 },
  //           { 位置: "浙江", GDP: 4123 },
  //         ],
  //       },
  //       settings: {
  //         position: "china",
  //         dataType: {
  //           GDP: "KMB",
  //         },
  //       },

  //   };
  // },
};
</script>

<style lang="scss" scoped>
#box {
  width: 100%;
  height: 600px;
}
</style>
